<template>
    <!-- AI云视卡片 -->
    <div class="AI-cloud-video-card">
        <div class="card-title" @click="jumpAICloudVideoDetail">
            <span class="card-title-text">AI云视</span>
        </div>
        <div class="card-content">
            <p class="tips">识别各类型次数统计</p>
            <div class="card-main-content">
                <div class="round-canvas">
                    <!-- 外圆 -->
                    <div class="margin-round"></div>
                    <!-- 内圆 -->
                    <div class="padding-round"></div>
                </div>
                <div class="ai-type-list">
                    <ul v-if="listData.length > 0" class="ai-type-content-wrap" :style="{'width': (pageTotal*100 + '%'), 'left': ('-' + (currentPageIndex-1)*100 + '%')}">
                        <template v-for="index in pageTotal">
                            <!-- 一条数据 -->
                            <li v-if="index == pageTotal && listData.length%2 > 0" class="ai-type-list-page one-itme-wrap" :style="{'width': (100/pageTotal + '%')}" :key="'page_'+index">
                                <div class="ai-type-item">
                                    <p class="ai-type-item-title">{{ listData[index*2-2].typeName }}</p>
                                    <p class="ai-type-item-value">{{ listData[index*2-2].num }}</p>
                                </div>
                            </li>
                            <!-- 有两条数据 -->
                            <li v-else class="ai-type-list-page double-itme-wrap" :style="{'width': (100/pageTotal + '%')}" :key="'page_'+index">
                                <template >
                                    <div class="ai-type-item">
                                        <p class="ai-type-item-title">{{ listData[index*2-2].typeName }}</p>
                                        <p class="ai-type-item-value">{{ listData[index*2-2].num }}</p>
                                    </div>
                                    <div class="ai-type-item">
                                        <p class="ai-type-item-title">{{ listData[index*2-1].typeName }}</p>
                                        <p class="ai-type-item-value">{{ listData[index*2-1].num }}</p>
                                    </div>
                                </template>
                            </li>
                        </template>
                    </ul>
                </div>
            </div>
            <!-- 分页点 -->
            <div class="page-model" v-if="pageTotal > 1">
                <i v-for="item in pageTotal" class="page-item" :class="{'active': currentPageIndex==item}" :key="item" @mouseenter="pageItemMouseEnter(item)" @mouseleave="pageItemMouseLeave"></i>
            </div>
        </div>
    </div>
</template>
<script>
import { getAIRecordCount } from '@/api/record'

let AIVideoCardInterval = null
export default {
    name: 'CardAICloudVideo',
    props: {
        orgId: {
            default() {
                return false
            }
        }
    },
    data() {
        return {
            listData: [], // 类型数据
            pageTotal: 1, // 总页数
            currentPageIndex: 1,
            orgIds:this.orgId || this.$store.state.userInfo.organizationIds,
        }
    },
    created() {
        let that = this;
        that.getData()

        if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
            window.FunList.cardAICloudVideo_ws = (wsData)=>{
                if(wsData.fireSType){
                    that.listData.forEach(element => {
                        if(element.type == wsData.fireSType){
                            element.num++
                        }
                    });
                }
            }
        }
    },
    methods: {
        getData() {
            let that = this

            getAIRecordCount({
                orgIds: that.orgIds
            }).then(res => {
                if(res.status === 200) {
                    let arr = res.data
                    that.pageTotal = Math.ceil(arr.length/2)
                    that.currentPageIndex = 1
                    that.listData = arr

                    if(that.pageTotal > 1) {
                        // 重新设定定时器
                        that.setChangeInterval()
                    } else {
                        // 若存在定时器，先清除
                        AIVideoCardInterval && clearInterval(AIVideoCardInterval)
                    }
                }
            })
        },
        // 设置自动切换定时器
        setChangeInterval() {
            let that = this
            // 若存在定时器，先清除
            AIVideoCardInterval && clearInterval(AIVideoCardInterval)
            // 重新设定定时器
            AIVideoCardInterval = setInterval(() => {
                if(that.currentPageIndex == that.pageTotal) {
                    that.currentPageIndex = 1
                } else {
                    that.currentPageIndex += 1
                }
            }, 5000);
        },
        jumpAICloudVideoDetail() {
            let that = this
            that.$Ctl.enterDetail('AICloudVideo', {
                orgId: that.orgIds // 联网单位Id
            })
        },
        // 页码鼠标移入
        pageItemMouseEnter(item) {
            this.currentPageIndex = item
            AIVideoCardInterval && clearInterval(AIVideoCardInterval)
        },
        // 页码鼠标离开
        pageItemMouseLeave() {
            // 重新设定定时器
            this.setChangeInterval()
        },
    }
}
</script>
<style lang="scss">
.AI-cloud-video-card {
    width: 100%;
    height: 100%;
    .card-content {
        width: 100%;
        height: calc(100% - 32px);
        .tips {
            color:rgba(255,255,255,.3);
            font-size: 16px;
            line-height: 50px;
            text-align: center;
        }
        .card-main-content {
            position: relative;
            width: 100%;
            height: calc(100% - 70px);
            .round-canvas {
                position: absolute;
                width: 50%;
                height: 100%;
                .margin-round {
                    width: 100%;
                    height: 100%;
                    background: url(../../assets/images/cards/ai-video-cloud-bg.png) center center no-repeat;
                    background-size: contain;
                    animation: scaning 5s linear infinite;
                }
                .padding-round {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: url(../../assets/images/cards/ai-video-cloud.png) center center no-repeat;
                    background-size: contain;
                }
            }
            .ai-type-list {
                position: relative;
                margin-left: 42%;
                width: 58%;
                height: 100%;
                overflow: hidden;
                .ai-type-content-wrap {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    .ai-type-list-page {
                        float: left;
                        width: 100%;
                        height: 100%;
                        &.one-itme-wrap {
                            background: url(../../assets/images/cards/one-li.png) center center no-repeat;
                            background-size: contain;
                            .ai-type-item {
                                height: 100%;
                            }
                        }
                        &.double-itme-wrap {
                            background: url(../../assets/images/cards/double-li.png) center center no-repeat;
                            background-size: contain;
                            .ai-type-item {
                                &:nth-child(2n-1) {
                                    padding-top: 10%;
                                }
                                &:nth-child(2n) {
                                    padding-bottom: 5%;
                                }
                            }
                        }
                        .ai-type-item {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            padding-left: 14%;
                            height: 50%;
                            .ai-type-item-title {
                                font-size: 14px;
                                color: #A3BEDD;
                            }
                            .ai-type-item-value {
                                font-size: 28px;
                                color: #C053FF;
                            }
                        }
                    }
                    
                }
            }
        }
        .page-model {
            display: flex;
            justify-content: center;
            line-height: 20px;
            .page-item {
                margin: 0 7px;
                border: 1px solid #5180CE;
                border-radius: 50%;
                width: 10px;
                height: 10px;
                cursor: pointer;
                &.active {
                    background-color: #5180CE;
                }
            }
        }
    }
}
</style>
